<template>
	<view class="new_item" @click="toDetail">
		<u-image class="img" mode="aspectFill" width="300" height="225" border-radius="8" :src="item.pageImg"></u-image>
		<view class="rightCon">
			<view class="main_tit">
				{{item.newsName || "暂无"}}
			</view>
			<view class="sub_tit">
				{{item.remark}}
			</view>
			<view class="source">
				<view class="beFrom">
					<!-- 	<u-image width="33" height="33" class="icon_img" src="http://www.people.com.cn/img/2016people/images/rmw_logo.png"
					 shape="circle">

					</u-image> -->
					{{item.source}}
				</view>
				<view class="columns">
				<!-- 	<view class="tag">{{item.columnList[0].columnName}}</view> -->
					<!-- <view class="tag" v-if="item.columnList.length>1">...</view> -->
				</view>
			</view>
			<view class="bottom">
				<view class="time">
				<!-- 	<text class="iconfont iconriqi"></text> -->
				<u-icon color="#9E9E9E" name="clock" size="30"></u-icon>
				<text class="txt date">{{handleDate(item.showDate, 'yyyy-MM-dd')}}</text>

				</view>
				<view class="msg">
					<text class="iconfont icondianzan"></text>
					<text class="txt">{{handleCount(item.goodNum,10000)}}</text>
					<text class="iconfont iconchakanliang"></text>
					<!-- 	<u-icon color="#9E9E9E" name="eye" size="30"></u-icon> -->
					<text class="txt">{{handleCount(item.lookNum,10000)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		handleDate,
		handleCount
	} from '@/utils/util.js'
	
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},
		},
		components: {

		},
		data() {
			return {

			};
		},
		created() {

		},
		methods: {
			handleDate,
			handleCount,
			toDetail() {
				if (this.item.type == 0) {
					this.navigateTo({
						url: `/pages/main/news/detail/index?newsCode=${this.item.newsCode}`
					})
				} else {
					this.navigateTo({
						url: `/pages/main/news/detail/imageDetail?newsCode=${this.item.newsCode}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";

	.new_item {
		position: relative;
		padding: 20rpx 0;
		display: flex;

		// .img{
		// 	// flex:1;
		// 	// height: 225rpx;
		// }
		.rightCon {
			flex: 1;
			display: flex;
			height: 225rpx;
			flex-direction: column;
			padding-left: 20rpx;
			justify-content: space-between;

			.main_tit {
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;
				word-break: break-all;
				overflow: hidden; // 超出的文本隐藏
				text-overflow: ellipsis;
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
				-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				-webkit-line-clamp: 2; // 结合上面两个属性，表示显示的行数。
			}

			.sub_tit {
				font-size: 22rpx;
				font-weight: 400;
				color: #333333;
				word-break: break-all;
				overflow: hidden; // 超出的文本隐藏
				text-overflow: ellipsis;
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
				-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				-webkit-line-clamp: 2; // 结合上面两个属性，表示显示的行数。
				// margin-top: 7rpx;
			}

			.source {
				width: 100%;
				display: flex;
				// margin-top: 11rpx;

				.beFrom {
					flex: 1;
					display: flex;
					font-size: 22rpx;
					font-weight: 400;
					color: #333333;
					word-break: break-all;
					overflow: hidden; // 超出的文本隐藏
					text-overflow: ellipsis;
					display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp: 1; // 结合上面两个属性，表示显示的行数。

					.icon_img {
						border: 1px solid #D8D8D8;
					}
				}

				.columns {
					display: flex;

					.tag {
						height: 34rpx;
						line-height: 34rpx;
						padding: 0 16rpx;
						font-size: 20rpx;
						background: #FF7D77;
						border-radius: 5rpx;
						color: #fff;
						margin-left: 10rpx;
					}
				}
			}

			.bottom {
				display: flex;
				font-size: 24rpx;
				font-weight: 400;
				color: #9E9E9E;
				align-items: center;
                 // background: blue;
				.time {
					height: 33rpx;
					display: flex;
					align-items: center;
				     // background: red;
					flex: 1;
				}
                .msg{
					display: flex;
				   align-items: center;
				   height: 29rpx;
				   // background: red;
				}
				.txt {
					// line-height: 33rpx;
					// margin-top: -4rpx;
					&.date{
						line-height: 33rpx;
						margin-top: -2rpx;
					}
					margin-left: 10rpx;
					&:nth-child(2){
						margin-right: 10rpx;
					}
				}

				.iconfont {
					font-size: 24rpx;
					
				}

				.iconchakanliang {
					margin-left: 20rpx;
					margin-top: 2rpx;
					font-size: 23rpx;
				}
			}
		}
	}
</style>
